<!DOCTYPE html>
<html lang="en">
<!-- 园林设计第一套模块 1-2 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .aboutUs_list {
            display: flex;
            flex-wrap: wrap;
        }


        .aboutUs_list_left {
            flex: 0 0 50%;
            position: relative;
        }

        .aboutUs_list_left_playBtn {
            position: absolute;
            width: 60px;
            height: 60px;
            background: url(../images/videBtn.png)-116px -196px no-repeat;
            top: 0%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            cursor: pointer;
        }

        .aboutUs_list_left:hover .aboutUs_list_left_playBtn {
            top: 50%;
            transform: translate(-50%, -50%);
            opacity: 1;
            transition: .5s ease;
        }

        .aboutUs_list_left:hover .aboutUs_list_left_img img {
            transform: scale(1.1);
        }

        .aboutUs_list_left_img {
            overflow: hidden;
        }

        .aboutUs_list_left_img img {
            width: 100%;
            height: 422px;
            object-fit: cover;
            transition: .5s ease;
        }

        .aboutUs_list_right {
            flex: 0 0 50%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-self: center;
            padding-left: 6%;
        }

        .aboutUs_list_right .aboutUs_list_right_title,
        .aboutUs_list_right_text {
            max-width: 640px;
        }

        .aboutUs_list_right_title {
            margin-bottom: 50px;
            font-size: var(--f_text);
            line-height: var(--l_text);
            color: var(--c_text);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;

        }

        .aboutUs_list_right .public_title {
            margin-top: 30px;
        }

        .aboutUs_list_right_text span {
            color: var(--c_tips);
            font-size: var(--f_describe);
            line-height: var(--f_describe);
        }



        .video_bg_mask {
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0px;
            display: none;
            z-index: 20;
        }

        .video_bg_mask .float_video_frame {
            margin: auto;
            background-color: black;
            position: relative;
            width: 960px;
            max-height: 540px;
        }

        .video_bg_mask .float_video,
        .video_bg_mask .float_video:focus {
            outline: none;
            width: 100%;
            height: 100%;
        }

        .float_video_frame_close {
            background-image: url(../images/close.png);
            background-repeat: no-repeat;
            display: block;
            width: 50px;
            background-size: 50% 50%;
            background-position: center;
            height: 50px;
            position: absolute;
            top: 0;
            z-index: 21;
            right: 0;
            cursor: pointer;
        }

        @media (max-width:768px) {
            .aboutUs_list {
                padding: 0 20px;
            }


            .aboutUs_list_left {
                flex: 100%;
            }

            .aboutUs_list_left_img img {
                height: 195px;

            }

            .aboutUs_list_left .aboutUs_list_left_playBtn {
                top: 50%;
                transform: translate(-50%, -50%);
                opacity: 1;
                transition: .5s ease;
            }

            .aboutUs_list_right {
                flex: 100%;
                padding: 0;
            }

            .aboutUs_list_right_title {
                margin-top: 20px !important;
                margin-bottom: 5px !important;
            }
        }

        /* 布局1 */

        /* 布局2 */
        .layout2 .aboutUs_list {
            flex-direction: row-reverse;
        }

        .layout2 .aboutUs_list_right {
            align-content: center;
        }

        /* 布局3 */
        .layout3 .aboutUs_list {
            flex-direction: column;
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
        }

        .layout3 .aboutUs_list_right {
            padding-left: 0;
            align-items: center;
        }

        .layout3 .aboutUs_list_right_title {
            margin-bottom: 20px;
            margin-top: 60px;
        }

        .layout3 .aboutUs_list_right .aboutUs_list_right_title,
        .layout3 .aboutUs_list_right_text {
            max-width: 998px;
            text-align: center;
        }

        /* 布局4 */
        .layout4 .aboutUs_list {
            flex-direction: column-reverse;
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
        }

        .layout4 .aboutUs_list_right {
            padding-left: 0;
            align-items: center;
        }

        .layout4 .aboutUs_list_right_title {
            margin-bottom: 20px;
        }

        .layout4 .aboutUs_list_right .aboutUs_list_right_title,
        .layout4 .aboutUs_list_right_text {
            max-width: 998px;
            text-align: center;
        }

        .layout4 .aboutUs_list_right {
            margin-bottom: 60px;
        }

        @media (max-width:768px) {
            .layout4 .aboutUs_list_right {
                margin-bottom: 0px;
            }

        }
    </style>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap4.5.min.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>

</head>

<body>
    <div class="aboutUs layout1 title_left modular">
        <div class="">
            <div class="aboutUs_list">
                <div class="aboutUs_list_left">
                    <div class="aboutUs_list_left_img">
                        <img src="../images/img_collection_2.webp" alt="">
                    </div>
                    <div class="aboutUs_list_left_playBtn"
                        data-video-src="http://0.ss.faisys.com/image/rimage/module/online_flv/Sun.mp4 ">
                    </div>
                </div>
                <div class="aboutUs_list_right">

                    <div class="aboutUs_list_right_title">
                        <p>专注打造中国美术教育品牌</p>
                    </div>
                    <div class="aboutUs_list_right_text">
                        <span>我们专注客户价值取向，通过不断创新和完善科学管理，为客户提供最优质的产品和最贴心的服务，同时积极履行社会责任和倡导人文关怀。在重视经济增长和可持续发民的同时，为构建和谐社会做出积极贡献。我们专注客户价值取向，通过不断创新和完善科学管理，为客户提供最优质的产品和最贴心的服务，同时积极履行社会责任和倡导人文关怀。在重视经济增长和可持续发民的同时，为构建和谐社会做出积极贡献。</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="video_bg_mask" class="video_bg_mask">
            <div class="float_video_frame">
                <span class="float_video_frame_close" id="float_video_frame_close"></span>
                <video id="float_video" src="" class="float_video" controls contextmenu="">
                </video>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            document.getElementById('video_bg_mask').style.height = window.innerHeight + 'px'
            document.getElementById('float_video_frame_close').addEventListener('click', function () {
                document.getElementById('video_bg_mask').style.display = 'none'
            })
            document.querySelectorAll('.aboutUs_list_left_playBtn').forEach(el => {
                el.addEventListener('click', function () {
                    document.getElementById('video_bg_mask').style.display = 'flex'
                    document.getElementById('float_video').getAttributeNode('src').value = el
                        .getAttributeNode('data-video-src').value
                })
            })
            $(window).resize(function () {
                document.getElementById('video_bg_mask').style.height = window.innerHeight + 'px'
            })
        })
    </script>
</body>

</html>